<template>
    <div>
        <!-- 停车场弹窗 -->
        <el-dialog title="选择停车位" :visible.sync="showCarParkDialog" width="70%">
            <div class="car-park-container">
                <el-card v-for="(car, index) in carPark" :key="index"
                    :class="['car-card', { 'selected': selectedCar === index + 1 }]" @click.native="selectCar(index)">
                    <p> {{ car ? `车辆:${car['license_plate_number']}` : '暂无车辆' }}</p>
                </el-card>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submit">确认</el-button>
                <el-button @click="showCarParkDialog = false">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getAllParkingOrders,vehicleEnterParking } from '@/api/Approach'
export default {
    data() {
        return {
            showCarParkDialog: false,
            carPark: [],
            selectedCar: null,
            plate_number: null, 
        };
    },
    methods: {
        selectCar(index) {
            this.selectedCar = index + 1;
        },
        openCarParkDialog(val) {
            this.showCarParkDialog = true;
            this.carPark = new Array(20)
            this.queryCarInfo()
            this.plate_number = val; // 将传入的车牌号存储在组件的 data 中
        },
        async queryCarInfo() {
            const { data } = await getAllParkingOrders({ status: 'in_progress' });
            console.log(data, '数据数据');
            // 确保 carPark 是一个完整的数组
            this.carPark = new Array(20).fill(null); // 初始化 20 个空车位
            data.forEach(item => {
                if (item['car_park'] >= 0 && item['car_park'] < 20) {
                    this.carPark[item['car_park']-1] = item; // 将数据填充到对应车位
                }
            });
            console.log(this.carPark, '车位数据');
        },
        submit() {
            if (!this.selectedCar) {
                this.$message.error("请选择车位");
                return;
            }
            const ID = localStorage.getItem("userId"); // 确保 ID 在方法中可用
            vehicleEnterParking({
                user_id: ID,
                license_plate_number: this.plate_number,
                car_park: this.selectedCar,
            })
                .then((res) => {
                    console.log(res);
                    this.$message.success("录入成功");
                    this.showCarParkDialog=false
                })
                .catch((err) => {
                    console.error("出场失败", err);
                    this.$message.error(err.response.data.message);
                });
        },
    },
};
</script>

<style scoped>
.car-park-container {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    /* 每行显示5个车位 */
    gap: 10px !important;
    margin-top: 20px !important;
}

.car-card {
    text-align: center !important;
    cursor: pointer !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

.car-card:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

.car-card.selected {
    border: 2px solid #409EFF !important;
    /* 高亮选中车位 */
    background-color: #f0f9ff !important;
}
</style>